<template>
  <el-drawer
    :title="title"
    v-model="visible"
    :direction="direction"
    :size="800"
  >
    <section class="drawer-main">
      <el-form
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
      >
        <el-form-item label="认证名称" prop="jarName">
          <el-input v-model="ruleForm.jarName" />
        </el-form-item>
        <el-form-item label="类名称" prop="classFullName">
          <el-input v-model="ruleForm.classFullName" />
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input
            v-model="ruleForm.url"
            disabled
            placeholder="文件上传后自动写入"
          />
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="ruleForm.memo" type="textarea" />
        </el-form-item>
        <el-form-item label="文件Jar包">
          <el-upload
            ref="upload"
            class="upload-button"
            style="width: 100%"
            :headers="config.headers"
            action="server-proxy/auth/plugin/upload"
            :on-exceed="handleExceed"
            :limit="1"
            :on-success="handleSuccess"
            :on-error="handleError"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </section>
    <footer class="drawer-footer">
      <el-button type="primary" @click="submit" :loading="loading">
        确 定
      </el-button>
      <el-button @click="beforeClose">取 消</el-button>
    </footer>
  </el-drawer>
</template>

<script>
import { defineComponent, watch, computed, ref, reactive } from "vue";

import { createAuth, updateAuth, uploadAuthSDK } from "@/api/adaptation";
import useEditDrawer from "@/hooks/useEditDrawer";
import AppFormSelect from "@/components/AppFormSelect/";
import { ElMessage } from "element-plus";
import { getToken, getCurrentOrg } from "@/utils/auth";
export default defineComponent({
  name: "EditDialog",
  emits: ["update:modelValue", "update-list"],
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {},
    },
    // create 新增， update 修改
    type: {
      type: String,
      default: "create",
    },
  },
  components: { AppFormSelect },
  setup(props, { emit }) {
    // 表单
    const DEFAULT_FORM = {};
    const appList = ref([]);
    // 验证
    const rules = computed(() => {
      const baseRules = {
        jarName: [
          { required: true, message: "请填写认证名称", trigger: "blur" },
        ],
        url: [{ required: true, message: "上传文件自动写入" }],
      };
      return baseRules;
    });
    const upload = ref();
    const config = reactive({ headers: {} });
    config.headers["Authorization"] = getToken();
    config.headers["ORG"] = getCurrentOrg();
    const handleSuccess = (res, file, fileList) => {
      ruleForm.value.url = res.data;
      console.log(ruleForm.value);
    };
    const handleExceed = async (files) => {
      upload.value.clearFiles();
      upload.value.handleStart(files[0]);
      var formdata = new FormData();
      formdata.append("file", files[0]);
      let res = await uploadAuthSDK(formdata);
      handleSuccess(res);
    };
    const handleError = async (err) => {
      console.log(err);
      ElMessage.error("上传失败,请核对后再上传");
    };
    const {
      visible,
      direction,
      title,
      loading,
      ruleForm,
      ruleFormRef,
      submit,
      beforeClose,
    } = useEditDrawer({
      createApi: createAuth,
      editApi: updateAuth,
      defaultForm: DEFAULT_FORM,
      emit,
      type: props.type,
      props,
    });
    // 显示时赋值
    watch(visible, (value) => {
      if (value) {
        ruleForm.value = {
          ...DEFAULT_FORM,
          ...props.item,
        };
        console.log("显示时赋值");
      }
      if (upload.value) {
        upload.value.clearFiles();
      }
    });
    return {
      loading,
      visible,
      direction,
      ruleFormRef,
      ruleForm,
      rules,
      title,
      submit,
      beforeClose,
      handleExceed,
      handleSuccess,
      handleError,
      upload,
      config,
    };
  },
});
</script>

<style lang="scss" scoped>
$height: 50px;
.drawer-main {
  height: calc(100% - 50px);
}
.drawer-footer {
  text-align: right;
  height: $height;
  line-height: $height;
}
</style>
